<script type="text/javascript">
    $(document).ready(function(){
        
       
        $('a.cell').click(function(){

            // Add overlay
            var height = $(document).height();
            $('<div id="overlay" />')
            .hide()
            .height(height)
            .appendTo('body')
            .fadeIn('slow');

            // Add image & center
            $('<img id="popupImage" src="' + $(this).find('img').attr('src') + '"/>').appendTo('body')+ 'alt ="Painting"';
            $('<img class="close" src="<?php echo base_url(); ?>images/close.png" style="height:40px;width:40px;z-index=10;top:0;right:0"/>').appendTo('body')+ 'alt ="close"';
            var img = $('#popupImage');
            $(".close").offset($("#popupImage").offset());
            var position = $("#popupImage").position();
            
            var imgTop = ($(window).height() - img.height())/2;
            var imgLft = ($(window).width() - img.width())/2;
            img
            .hide()
            .css({ top: imgTop, left: imgLft })
            .fadeIn('slow');
            
            $(".close").offset({top:imgTop+40 , left: imgLft + img.width()+20});
            // Add click functionality to hide everything
            $('#overlay,#popupImage,.close').click(function(){
                $('#overlay,#popupImage').fadeOut('slow',function(){
                    $(this).remove();
                    $('#overlay').remove();
                    $('.close').remove();
                });
            })
        });
    })
</script>
<div id="content_photos">	
    <div id="photos_container">
        <ul>
            <?php
            foreach ($query as $row) {
                ?>
                <div id="photos_container_element">
                    <li>
                        <div id="image_thumbail">
                            <a class="cell">
                                <img src="<?php echo base_url(); ?>images/paintings/other/p40<?php echo $row->id; ?>.jpg" height='150' alt='This is an image' />
                            </a>
                        </div>
                        <br />
                        <p>
                            <?php
                            if ($row->description != "") {
                                echo $row->description;
                            }
                            ?>
                        </p>
                    </li>
                </div>
            <?php } ?>

        </ul>
    </div>
</div>
<div id="content_pager">
    <?php
    foreach ($pages as $row) {
        $totalpages = ceil(($row->count) / 6);
        break;
    }
    if ($page > 1) {
        ?>
        <a href =
           "<?php echo site_url('welcome/miscellaneous'); ?>/<?php echo ($page - 1); ?>"
           >
            <?php echo '&#171'; ?></a>

        <?php
    }
    echo '[';
    for ($i = 1; $i <= $totalpages; $i++) {
        ?>
        <a href =
           "<?php echo site_url('welcome/miscellaneous'); ?>/<?php echo $i; ?>"
           <?php
           if ($page == $i) {
               echo 'style="color: red"';
           }
           ?> 
           >
            <?php echo $i ?></a>
        <?php
    }
    echo ']';
    if ($page < $totalpages) {
        ?>
        <a href =
           "<?php echo site_url('welcome/miscellaneous'); ?>/<?php echo ($page + 1); ?>"
           >
            <?php echo '&#187'; ?></a>

        <?php
    }
    ?>

</div>